<template>
    <div class="a">
        <!-- 头部区域 -->
        <div class="header">
            <div class="text">个人中心</div>
            <div class="location">
                <van-icon name="location" />
                <span>南职C-201</span>
                <van-icon name="arrow" />
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <div class="user-info">
                <img
                    class="user-avatar"
                    src="@/img/image (1).png"
                    alt="用户头像"
                />
                <div class="user-details">
                    <div class="nickname">昵称：{{ nickname }}</div>
                    <div class="signature">个性签名：{{ signature }}</div>
                </div>
            </div>
            <van-cell-group class="function-cell-group">
                <van-cell title="我的订单" @click="numl" is-link arrow="right"/>
                <van-cell title="地址管理" @click="ealse()" is-link arrow="right" />
                <van-cell title="收藏夹" is-link arrow="right" />
                <van-cell title="设置" @click="login()" is-link arrow="right" />
            </van-cell-group>
        </div>
        <!-- 页脚组件 -->
        <Footer />
    </div>
</template>

<style scoped>
/* 整体容器 */
.a {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f7f7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.van-cell{
    font-size: 5vw;
    width: 80vw; 
    height: 20vw;
;
}

/* 头部 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 2vw;
    border-bottom: 1px solid #e0e0e0;
    height: 30px;
    font-size: 7vw;
}

.header.text {
    font-size: 4vw;
    font-weight: 600;
}

.header.location {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 3vw;
}

.header.location van-icon {
    margin: 0 0.5vw;
}

/* 内容区域 */
.content {
    flex: 1;
    padding: 2vw;
}

/* 用户信息部分 */
.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 3vw;
    height: 40px;
}

.user-avatar {
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 5vw; /* 增加右侧间距 */
    margin-left: 3vw;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.nickname {
    font-size: 3.5vw;
    font-weight: 500;
}

.signature {
    font-size: 3vw;
    color: #999;
}

/* 功能单元格组 */
.function-cell-group {
    font-size: 3.5vw;
    padding: 2vw;
    width: 90%; 
    /* 让组水平居中 */
    margin: 0 auto;
}

.function-cell-group van-cell {
    padding: 1.5vw 1vw;
    min-height: 8vw; 
}

/* 页脚 */
Footer {
    margin-top: 2vw;
}

/* 媒体查询，当屏幕宽度小于 768px 时调整样式 */
@media (max-width: 768px) {
   .header.text {
        font-size: 5vw;
    }

   .header.location {
        font-size: 4vw;
    }

   .nickname {
        font-size: 4.5vw;
    }

   .signature {
        font-size: 4vw;
    }

   .function-cell-group {
        font-size: 3.5vw;
        padding: 3vw;
    }

   .function-cell-group van-cell {
        padding: 3.5vw 2vw;
    }

   .user-avatar {
        width: 15vw;
        height: 15vw;
    }
}
</style>

<script setup lang="ts">
import Footer from '@/component/footer.vue';
import { useRouter } from 'vue-router';
import { reactive, toRefs } from 'vue';

const data = reactive({
    username: '',
    signature: '',
    password: '',
    nickname: '',
})

const {username, signature, password,nickname} = { ...toRefs(data) }

const parsedUserInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');

const { username: parsedUsername, signature: parsedSignature, password: parsedPassword,nickname:parsednickname } = parsedUserInfo;

data.username = parsedUsername || '';
data.signature = parsedSignature || '';
data.password = parsedPassword || '';
data.nickname = parsednickname || '';

const router = useRouter()
  function login() {
    router.push('./address')
  }
  function ealse() {
    router.push('./userlnfoEdit')
  }
  function numl() {
    router.push('./order')
  }
</script>